<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache" />
    <title>列表列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="description" content="">
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="static/css/aui.2.0.css">
    <script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
    <script src="static/js/webiaoqin.js"></script>
    <style>
        img{max-width: 100%;}

        #form_article{
            min-height: 9rem;
            background-color: #fff;
            padding: .5rem;
        }
        body{
            overflow-x: hidden;
        }
        .page_emotion dd{
            display: inline-block;
            float:left;
            width:14.2%;
            height:24px;
            margin:5px 0;
            text-align:center;
        }
        .list_emotion *[data-key]{
            color:transparent;
            display: block;
            width:24px;
            height:24px;
            margin: auto;
            background:url(static/images/default.gif) no-repeat 0 0;
            -webkit-background-size:auto 24px;
        }
        .list_emotion *.del{
            background-image:url(static/images/del.png);
        }
        .nav_emotion{
            padding:10px 0;
            text-align: center;
        }
        .nav_emotion span{
            display: inline-block;
            width:8px;
            height:8px;
            border-radius:10px;
            background: #ebebeb;
            margin:0 5px;
        }
        .nav_emotion span.on{
            background-color:#bbb;
        }
    </style>
</head>
<body>
	<header class="aui-bar aui-bar-nav" style="background-color: #3c445e;">
        <a onclick="history.back()" class="aui-pull-left">
            <i class="aui-iconfont aui-icon-left"></i>
        </a>
        <div class="aui-title">回复</div>
    </header>

    <article id="form_article" contenteditable="true" onkeydown="myInput.listen(this, event);"></article>

    <div class="page_emotion box_swipe" id="page_emotion">
        <dl id="list_emotion" class="list_emotion pt_10"></dl><!-- 表情框 -->
        <dt><ol id="nav_emotion" class="nav_emotion"></ol></dt><!-- 分页提示点 -->
    </div>

</body>

<script>
    $(function(){
        var say = '说点什么...';
        if ($("#form_article").html() === "") {
            $("#form_article").html(say);
        }
        $("#form_article").click(function(){
            if($("#form_article").html() == say){
                $("#form_article").html("");
            }
        });
        $("#page_emotion  dd").click(function(){
            $("#form_article").html( $("#form_article").html().replace(say, '') );
        });
    });
</script>
</html>

